<template>
	<!-- 刘振坤 2023年4月12号 -->
	<!-- 热销商品 -->
	<view style="width: 96%;margin-left: 2%;back" class="popularRecommendation">
		<!-- 商品列表 -->
		<view style="width: 100%;background-color: palegoldenrod;margin-left: 3px;margin-top:20px;">
			<view @click="toGoodsView(item.id)" v-for="(item, index) in queryBasedOnSalesVolumeList" :key="index" style="border-radius: 20px;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.4);background:#fff;width:48%;margin-bottom: 10px;float: left;margin-right: 2%;" class="aaaa">
				<view style="width: 100%;height: 100px;text-align: center;margin-top: 10px;">
					<!-- <img style="width: 60%;height: 90px;" src="https://img1.baidu.com/it/u=1724769852,3544368263&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"> -->
					<img style="width: 60%;height: 90px;border-radius: 20px;" :src="'http://101.43.223.224:8765/image/getImageById?id='+(item.imageId==null?262:item.imageId.split(',')[0])">
				</view>
				<view style="width: 100%;height: 50px;text-align: center;font-size: 14px;">
					<view style="height: 20px;width: 90%;overflow: hidden;word-break:break-all;margin-left:5%;">￥{{ item.price }}</view>
					<view style="margin-top: 5px;width: 90%;overflow: hidden;word-break:break-all;height: 22px;margin-left:5%;">{{ item.commodityName }}</view>
				</view>
			</view>
		</view>
		<!-- 底部提示 -->
		<view style="width: 100%;margin-top: 30px;float: left;">
			<view style="width: 37.6%;float: left;">
				<u-line color="grey"></u-line>
			</view>
			<view style="float: left;margin-left: 2.5%;margin-right: 2%;font-size: 14px;position: relative;top: -10px;color: grey;">已经到底了</view>
			<view style="width: 37.5%;float: left;">
				<u-line color="grey"></u-line>
			</view>
		</view>
		<view style="width: 100%;height: 50px;float: left;"></view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 商品列表
				queryBasedOnSalesVolumeList: []
			}
		},
		onLoad() {
			this.queryTheInformationOfGroupedProducts()
		},
		methods: {
			// 查询商品信息
			queryTheInformationOfGroupedProducts(){
				this.$myRequest({
					url: '/groupFreeShipping/queryTheInformationOfGroupedProducts'
				}).then(res => {
					this.queryBasedOnSalesVolumeList = res.data.data
				})
			},
			// 跳转商品详情
			toGoodsView(id){
				uni.navigateTo({
					//保留当前页面，跳转到应用内的某个页面
					url: '/pages/goods/GoodsView?id='+id
				})
			},
		}
	}
</script>
<style lang="scss">
	// .aaaa:hover{
	// 	transform: scale(1.1);
	// 	transition: 0.5s;
	// 	border: 3px solid darkgrey;
	// }
</style>
